<template>
	<view>
		<view class="content">
			<view style="border-bottom: 1px solid #f4f4f4;">
				<u-tabs :list="list" :current="current" @click="change"></u-tabs>
			</view>

			<view style="padding: 20rpx;">
				<TagComp :tagList="lists" :active="active" @change="changes" />
			</view>


		</view>

		<MarketChart :detail="detail" v-if="choosekline===1" />
		<MarketList :lists="listes" @changeitem="changeitem" v-else />
	</view>
</template>
<script>
	import MarketChart from "@/pages/marketHall/components/MarketChart.vue";
	import TagComp from "@/components/TagComp.vue";
	import MarketList from "@/pages/marketHall/components/MarketList.vue";
	import MarketInfoList from "@/pages/components/MarketInfoList.vue";

	export default {
		name: 'index',
		components: {
			MarketInfoList,
			MarketChart,
			TagComp,
			MarketList
		},
		data() {
			return {
				current: 0,
				list: [],
				choosekline: 0,
				lists: [],
				listes: [],
				cid: 0,
				cids: 0,
				active: 0,
				total: 0,
				page: 1,
				detail: {}
			}
		},
		onLoad() {
			this.getcate()
		},
		onReachBottom() {
			if (this.total > this.page) {
				this.page++
				this.getlist()
			}
		},
		methods: {
			changeitem(e) {
				console.log(e)
				uni.showLoading()
				this.$.ajax(1, "POST", '/index/getkline', {
					cid: e
				}, (res) => {
					uni.hideLoading()
					this.choosekline = 1
					this.detail = res.data.detail
				})

			},
			getcate() {
				this.$.ajax(1, "POST", '/index/getcate', {
					type: 1
				}, (res) => {
					this.list = res.data.list
					this.cid = res.data.list[0].id
					this.getcates()
				})
			},
			changes(item) {
				console.log(item)
				this.cids = item[0].id
				this.active = item[1]
				this.page = 1
				this.choosekline = 0
				this.getlist()
			},
			change(item) {
				console.log(item.id)
				this.current = item.index
				this.active = 0
				this.cid = item.id
				this.choosekline = 0
				this.getcates()
			},
			getcates() {
				this.$.ajax(1, "POST", '/index/getcates', {
					cid: this.cid
				}, (res) => {
					this.lists = res.data.list
					this.cids = res.data.list[0].id
					this.getlist()
				})
			},
			getlist() {
				this.$.ajax(1, "POST", '/index/getthreecate', {
					cid: this.cids,
					page: this.page
				}, (res) => {
					this.listes = res.data.list
				})
			}
		},
		created() {

		},
		mounted() {

		},
	}
</script>
<style lang="scss" scoped>
	.uni-page {
		background-color: #fff;

	}

	.content {
		//position: fixed;
		//width: 100%;
		//height: 100%;
		// padding: 20rpx;
		background-color: #fff;
	}
</style>